<template>
  <div>
    <van-nav-bar
      title="权限设置"
      left-text=""
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
    />

    <div class="user">
      <div class="userleft">
        <van-image width="60" height="60" :src="uicon" round />
      </div>
      <div class="useright">
        <div class="userr-item">
          <i></i>
          <span class="name">用户名</span>
          <span class="value">{{ username }}</span>
        </div>
        <div class="userr-item">
          <i></i>
          <span class="name">联系方式</span>
          <span class="value">{{ tel }}</span>
        </div>
        <div class="userr-item">
          <i></i>
          <span class="name">所属部门</span>
          <span class="value">{{ grid }}</span>
        </div>
      </div>
    </div>

    <div class="userperm">
      <i></i>
      <span>用户权限</span>
    </div>
    <div class="permSetDetail">
      <van-cell title="超级管理员">
        <template>
          <van-switch v-model="cadmin" size="18" />
        </template>
      </van-cell>
      <van-divider
        content-position="left"
        :style="{ borderColor: '#4DD865', padding: '0 16px' }"
        >事件管理</van-divider
      >
      <van-cell title="人工事件上报">
        <template>
          <van-switch v-model="cheventre" size="18" @change="cheventreBtn" />
        </template>
      </van-cell>
      <van-cell title="事件结案">
        <template>
          <van-switch v-model="ceventend" @change="ceventendBtn" size="18" />
        </template>
      </van-cell>
      <van-cell title="事件删除">
        <template>
          <van-switch v-model="ceventdel" @change="ceventdelBtn" size="18" />
        </template>
      </van-cell>
      <van-cell title="事件信息修改">
        <template>
          <van-switch v-model="ceventimforedit" @change="ceventimforeditBtn" size="18" />
        </template>
      </van-cell>
      <van-divider
        content-position="left"
        :style="{ borderColor: '#4DD865', padding: '0 16px' }"
        >用户管理</van-divider
      >
      <van-cell title="添加用户">
        <template>
          <van-switch v-model="cuseradd" @change="cuseraddBtn" size="18" />
        </template>
      </van-cell>
      <van-cell title="删除用户">
        <template>
          <van-switch v-model="cuserdel" @change="cuserdelBtn" size="18" />
        </template>
      </van-cell>
      <van-cell title="用户信息修改">
        <template>
          <van-switch v-model="cuserimforedit" @change="cuserimforeditBtn" size="18" />
        </template>
      </van-cell>
      <van-cell title="用户权限修改">
        <template>
          <van-switch v-model="cuserpermedit" @change="cuserpermeditBtn" size="18" />
        </template>
      </van-cell>
      <van-divider
        content-position="left"
        :style="{ borderColor: '#4DD865', padding: '0 16px' }"
        >消息通知</van-divider
      >
      <van-cell title="消息接收">
        <template>
          <van-switch v-model="cmsgget" @change="cmsggetBtn" size="18" />
        </template>
      </van-cell>
      <van-cell-group>
        <van-cell
          is-link
          title="所属网格"
          @click="gridshow = true"
          :value="gridvalue"
        />
        <van-action-sheet
          v-model="gridshow"
          :actions="gridactions"
          @select="gridSelect"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { powerPermission } from '../../../utils/api'
export default {
  name: "permSetting",
  data() {
    return {
      uicon: "https://img01.yzcdn.cn/vant/cat.jpeg",
      username: "张三",
      tel: "17867465622",
      grid: "街道网格",

      cadmin: true, //超级管理员
      cheventre: true, //人工事件上报
      ceventend: true, //事件结案
      ceventdel: true, //事件删除
      ceventimforedit: true, //事件信息修改
      cuseradd: true, //添加用户
      cuserdel: true, //删除用户
      cuserimforedit: true, //用户信息修改
      cuserpermedit: true, //用户权限修改
      cmsgget: true, //消息接收

      gridshow: false,
      gridvalue: "",
      gridactions: [{ name: "全部" },{ name: "G0701" }, { name: "G0702" }, { name: "G0703" }],
      lists:''
    };
  },
  mounted() {
     if(this.$route.params){
      this.lists = this.$route.params.detail;
      this.username = this.lists.name;
      this.tel = this.lists.mobile;
      this.grid = this.lists.partName;
      this.gridvalue = this.lists.ownerGrid == 'all'?'全部':this.lists.ownerGrid;
      this.cadmin = this.lists.role == 'admin' ? true : false;
      this.cheventre = this.lists.permissionList[0].status == '1'? true:false;
      this.ceventend = this.lists.permissionList[1].status == '1'? true:false;
      this.ceventdel = this.lists.permissionList[2].status == '1'? true:false;
      this.ceventimforedit = this.lists.permissionList[3].status == '1'? true:false;
      this.cuseradd = this.lists.permissionList[4].status == '1'? true:false;
      this.cuserdel = this.lists.permissionList[5].status == '1'? true:false;
      this.cuserimforedit = this.lists.permissionList[6].status == '1'? true:false;
      this.cuserpermedit = this.lists.permissionList[7].status == '1'? true:false;
      this.cmsgget = this.lists.permissionList[8].status == '1'? true:false;
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/regulatoryPower" });
    },
    gridSelect(value) {
      this.gridvalue = value.name;
      this.gridshow = false;
    },
    //更新权限
    uppermissions(pamas){
      powerPermission(pamas).then((res)=>{
        if(res.code === 200){
          Toast('权限修改成功');
        }else{
          Toast(res.message);
        }
      })
    },
    //人工上报更改
    cheventreBtn(val){
      let datas = this.lists;
      datas.permissionList[0].status = val == false?'0':'1';
      this.uppermissions(datas)
    },
    //事件结案更改
    ceventendBtn(val){
      let datas = this.lists;
      datas.permissionList[1].status = val == false?'0':'1';
      this.uppermissions(datas)
    },
    //事件删除更改
    ceventdelBtn(val){
      let datas = this.lists;
      datas.permissionList[2].status = val == false?'0':'1';
      this.uppermissions(datas)
    },
    //事件信息修改
    ceventimforeditBtn(val){
      let datas = this.lists;
      datas.permissionList[3].status = val == false?'0':'1';
      this.uppermissions(datas)
    },
    //添加用户
    cuseraddBtn(val){
      let datas = this.lists;
      datas.permissionList[4].status = val == false?'0':'1';
      this.uppermissions(datas)
    },
    //删除用户
    cuserdelBtn(val){
      let datas = this.lists;
      datas.permissionList[5].status = val == false?'0':'1';
      this.uppermissions(datas)
    },
    //用户信息修改
    cuserimforeditBtn(val){
      let datas = this.lists;
      datas.permissionList[6].status = val == false?'0':'1';
      this.uppermissions(datas)
    },
    //用户权限修改
    cuserpermeditBtn(val){
      let datas = this.lists;
      datas.permissionList[7].status = val == false?'0':'1';
      this.uppermissions(datas)
    },
    //消息接收
    cmsggetBtn(val){
      let datas = this.lists;
      datas.permissionList[8].status = val == false?'0':'1';
      this.uppermissions(datas)
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.user {
  width: 100%;
  padding: 5px 20px;
  margin: auto;
  padding-top: 55px;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
}
.userleft {
  float: left;
  margin-top: 2px;
}
.useright {
  float: left;
  margin-left: 10px;
}
.userr-item {
  width: 100%;
  height: 23px;
  line-height: 23px;
}
.userr-item i {
  width: 15px;
  height: 15px;
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.userr-item .name {
  font-size: 12px;
  color: #666666;
  display: inline-block;
  margin-left: 5px;
  margin-right: 10px;
}
.userr-item:nth-child(1) i {
  background-image: url("~@/assets/img/regulatoryPower/username.png");
}
.userr-item:nth-child(2) i {
  background-image: url("~@/assets/img/regulatoryPower/tel.png");
}
.userr-item:nth-child(3) i {
  background-image: url("~@/assets/img/regulatoryPower/grid.png");
}

.userperm {
  width: 90%;
  margin: auto;
  height: 40px;
  line-height: 40px;
}
.userperm i {
  width: 15px;
  height: 15px;
  float: left;
  margin-top: 14px;
  margin-right: 5px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("~@/assets/img/regulatoryPower/userperm.png");
}
</style>
